<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <GoodsCategorySearchQuick v-on:searchData="searchData" />
          <Button class="opt-btn" @click="showAddModal" type="primary">添加</Button>
          <Dropdown class="opt-btn" @on-click="batchOpt">
            <Button type="primary">
              批量操作
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="batchActive">批量激活</DropdownItem>
              <DropdownItem name="batchInactive">
                <span style="color: red;">批量冻结</span>
              </DropdownItem>
              <DropdownItem name="batchRemove" divided>
                <span style="color: red;">批量删除</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Dropdown class="opt-btn" @on-click="switchCategoryLevel">
            <Button type="primary">
              {{currCategoryLevel}}
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="0">全部类目</DropdownItem>
              <DropdownItem name="1">一级类目</DropdownItem>
              <DropdownItem name="2">二级类目</DropdownItem>
              <DropdownItem name="3">三级类目</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Button class="opt-btn" @click="showSearchModal" type="primary">高级搜索</Button>
          <Tooltip class="opt-btn" content="刷新" placement="right">
            <Button icon="md-refresh" type="success" shape="circle" @click="searchTable(false)"></Button>
          </Tooltip>
                    <Tooltip class="opt-btn" content="重置搜索" placement="right">
                        <Button icon="md-repeat" type="success" shape="circle" @click="researchTable"></Button>
                    </Tooltip>
          <GoodsCategoryTableMain
            ref="table"
            v-on:searchTable="searchTable"
            v-on:showEditModal="showEditModal"
            v-on:showDetailModal="showDetailModal"
            v-on:showGoodsAttrOrderModal="showGoodsAttrOrderModal"
            v-on:showGoodsCategoryAttrDrawer="showGoodsCategoryAttrDrawer"
            v-on:showUploadModal="showUploadModal"
            v-on:showParentDetailModal="showParentDetailModal"
            v-on:showSearchTableModal="showSearchTableModal"
            v-on:addChildrenCategory="addChildrenCategory"
            v-on:seeChildrenCategory="seeChildrenCategory"
            v-on:showGoodsCategoryBrandDrawer="showGoodsCategoryBrandDrawer"
          />
        </Card>
      </i-col>
    </Row>
    <GoodsCategoryAddEditModal ref="addEditModal" v-on:add="add" v-on:edit="edit" />
    <GoodsCategorySearchModal ref="searchModal" v-on:searchTable="searchTable" />
    <GoodsCategoryDetailModal ref="detailModal" />
    <GoodsAttributeOrderModal ref="goodsAttributeOrderModal" />
    <GoodsCategoryAttrsDrawer ref="goodsCategoryAttrsDrawer" />
    <GoodsCategoryBrandDrawer ref="goodsCategoryBrandDrawer" />
    <UploadModal
      ref="uploadModal"
      @search="searchTable"
      :title="uploadModal.title"
      :format="uploadModal.format"
    />
    <GoodsCategoryAttributeMainModal ref="goodsCategoryAttributeMainModal" />
    <Modal v-model="modal.searchTableModal" title="选择父类目" :mask-closable="false" width="1020">
      <goodsCategoryMainSingle ref="searchTableModal" v-on:confirmChoice="confirmChoice" />
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('searchTableModal')">取消</Button>
        <Button type="primary" size="large" @click="bottomConfirmChoice">确认选择</Button>
      </div>
    </Modal>
    <Modal v-model="modal.childrenCategory" :title="'查看《' + categoryTitle + '》的子类目'" :mask-closable="false" width="1020">
      <GoodsCategoryMainShow ref="seeChildrenCategory" />
      <div slot="footer">
        <Button type="default" size="large" @click="cancelModal('childrenCategory')">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as utils from '@/api/utils-v2'
import GoodsCategoryTableMain from './GoodsCategoryTableMain.vue'
import GoodsCategoryAddEditModal from './GoodsCategoryAddEditModal.vue'
import GoodsCategorySearchModal from './GoodsCategorySearchModal.vue'
import GoodsCategoryDetailModal from './GoodsCategoryDetailModal.vue'
import GoodsAttributeOrderModal from '../goods-attribute/GoodsAttributeOrderModal.vue'
import GoodsCategoryAttrsDrawer from './GoodsCategoryAttrsDrawer.vue'
import GoodsCategoryBrandDrawer from './GoodsCategoryBrandDrawer.vue'
import goodsCategoryMainSingle from './GoodsCategoryMainSingle.vue'
import GoodsCategoryMainShow from './GoodsCategoryMainShow.vue'
import GoodsInfoMainShow from '../goods-info/GoodsInfoMainShow.vue'
import GoodsCategorySearchQuick from './GoodsCategorySearchQuick.vue'
import UploadModal from '_c/upload-modal'
import GoodsCategoryAttributeMainModal from '../goods-category-attr/GoodsCategoryAttributeMainModal.vue'
import * as ResponseStatus from '@/api/response-status'
export default {
  name: 'GoodsCategoryMain',
  components: {
    GoodsCategoryTableMain,
    GoodsCategoryAddEditModal,
    GoodsCategorySearchModal,
    GoodsCategoryDetailModal,
    GoodsAttributeOrderModal,
    GoodsCategoryAttrsDrawer,
    GoodsCategoryBrandDrawer,
    UploadModal,
    GoodsCategoryAttributeMainModal,
    goodsCategoryMainSingle,
    GoodsCategoryMainShow,
    GoodsInfoMainShow,
    GoodsCategorySearchQuick
  },
  data() {
    return {
      categoryTitle: '',
      modal: {
        searchTableModal: false,
        childrenCategory: false,
        goodsInfo: false
      },
      urls: {
        batchRemoveUrl: '/goods-category/admin/batch-remove',
        batchActiveUrl: '/goods-category/admin/batch-active',
        oneUrl: '/goods-category/admin/one/'
      },
      uploadModal: {
        title: '上传封面图片',
        format: ['jpg', 'jpeg', 'png', 'bmp'],
        uploadUrl: '/goods-category/admin/upload/'
      },
      currCategoryLevel: '全部类目'
    }
  },
  computed: {},
  mounted() {},
  methods: {
    searchData(searchForm) {
      let searchModal = this.$refs.searchModal
      searchModal.searchForm = searchForm
      this.searchTable()
    },
    searchTable(reset) {
      utils.search(this, reset)
    },
    researchTable() {
        this.$refs.searchModal.resetForm()
        setTimeout(() => {
            utils.search(this, true)
        }, 10);
    },
    showAddModal() {
      let addEditModal = this.$refs.addEditModal
      addEditModal.modal.add = true
      addEditModal.parentName = '顶级类目'
    },
    add() {
      utils.add(this)
    },
    showEditModal(row) {
      let addEditModal = this.$refs.addEditModal
      if (row.parentId === 0) {
        addEditModal.parentName = '顶级类目'
        addEditModal.modal.edit = true
        row.version = null
                row.createTime = null
                row.updateTime = null
                addEditModal.form = row
      } else {
        utils
          .doGet(this.urls.oneUrl + row.parentId, {})
          .then(res => {
            if (ResponseStatus.OK === res.data.code) {
              const title = res.data.data.title
              if (title) {
                addEditModal.parentName = title
              }

              addEditModal.modal.edit = true
              row.version = null
                row.createTime = null
                row.updateTime = null
                addEditModal.form = row
            } else {
              this.$Message.error(res.data.message)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    edit() {
      utils.edit(this)
    },
    showDetailModal(row) {
      let detailModal = this.$refs.detailModal
      detailModal.modal.detail = true
      detailModal.form = row
      detailModal.getDictItemsDisplayValue()
    },
    showSearchModal() {
      let searchModal = this.$refs.searchModal
      searchModal.modal.search = true
    },
    batchOpt(itemName) {
      if (itemName === 'batchActive') {
        utils.batchActive(this, 0)
      } else if (itemName === 'batchInactive') {
        utils.batchActive(this, 1)
      } else if (itemName === 'batchRemove') {
        utils.batchRemove(this)
      }
    },
    /**
     * 切换类目级别
     */
    switchCategoryLevel(itemName) {
      let categoryLevel = ''
      if (itemName === '0') {
        // 全部类目
        categoryLevel = ''
        this.currCategoryLevel = '全部类目'
      } else if (itemName === '1') {
        // 一级类目
        categoryLevel = 1
        this.currCategoryLevel = '一级类目'
      } else if (itemName === '2') {
        // 二级类目
        this.currCategoryLevel = '二级类目'
        categoryLevel = 2
      } else if (itemName === '3') {
        // 三级类目
        this.currCategoryLevel = '三级类目'
        categoryLevel = 3
      }
      let searchModal = this.$refs.searchModal
      searchModal.searchForm.categoryLevel = categoryLevel
      this.searchTable()
    },
    showGoodsAttrOrderModal(categoryId) {
      this.$refs.goodsAttributeOrderModal.attrsOrderModal = true
      this.$refs.goodsAttributeOrderModal.initData(categoryId)
    },
    showGoodsCategoryAttrDrawer(categoryId) {
      this.$refs.goodsCategoryAttrsDrawer.initData(categoryId)
    },
    showUploadModal(categoryId) {
      this.$refs.uploadModal.uploadUrl = this.uploadModal.uploadUrl + categoryId
      this.$refs.uploadModal.setUploadHeaders()
      this.$refs.uploadModal.uploadModal = true
    },
    /**
     * 显示父级的详情
     */
    showParentDetailModal(id) {
      if (id === 0) {
        this.$Message.warning('该类目是顶级类目')
        return
      }
      utils
          .doGet(this.urls.oneUrl + id, {})
          .then(res => {
            if (ResponseStatus.OK === res.data.code) {
              this.showDetailModal(res.data.data)
            } else {
              this.$Message.error(res.data.message)
            }
          })
          .catch(err => {
            console.log(err)
          })
    },
    showModal(modal) {
      utils.showModal(this, modal)
    },
    cancelModal(modal) {
      utils.cancelModal(this, modal)
    },
    /**
     * 显示查询的模态窗
     */
    showSearchTableModal() {
      this.modal['searchTableModal'] = true
      this.$refs.searchTableModal.searchTable()
    },
    /**
     * 底部的确认选择父级类目
     */
    bottomConfirmChoice() {
      this.$refs.searchTableModal.confirmSelection()
    },
    /**
     * 确认选择父级类目
     */
    confirmChoice(row) {
      this.modal['searchTableModal'] = false
      let searchModal = this.$refs.searchModal
      searchModal.searchForm.parentIdMin = searchModal.searchForm.parentIdMax = row.id
      this.searchTable()
    },
    /**
     * 添加子类目
     */
    addChildrenCategory(row) {
      let addEditModal = this.$refs.addEditModal
      addEditModal.modal.add = true
      addEditModal.parentName = row.title
      addEditModal.form.parentId = row.id
      addEditModal.form.categoryLevel = row.categoryLevel + 1
    },
    /**
     * 查看子类目
     */
    seeChildrenCategory(row) {
      this.showModal('childrenCategory')
      this.categoryTitle = row.title
      let seeChildrenCategory = this.$refs.seeChildrenCategory
      let searchModal = seeChildrenCategory.$refs.searchModal
      searchModal.searchForm.parentIdMin = row.id
      searchModal.searchForm.parentIdMax = row.id
      seeChildrenCategory.searchTable()
    },
    /**
     * 分配品牌
     */
    showGoodsCategoryBrandDrawer(categoryId) {
      this.$refs.goodsCategoryBrandDrawer.initData(categoryId)
    }
  }
}
</script>

<style>
</style>
